@extends('admin.layout.base')
@section('styles')
    <style>
        .ad-img {
            width: 210px;
            height: 140px;
            border: 1px dashed #d9d9d9;
            display: block;
        }
        .ad-uploader-icon {
            cursor: pointer;
            font-size: 28px;
            color: #8c939d;
            width: 210px;
            height: 140px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            line-height: 150px;
            text-align: center;
        }
    </style>
    {{--级联多选--}}
    <link href="{{ asset('//unpkg.com/element-ui@2.9.2/lib/theme-chalk/index.css') }}" rel="stylesheet">
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-info">
            <el-form :model="form" ref="form" class="form" label-width="100px">
                <div class="panel-header"> <div class="panel-title"> 设置 </div> </div>
                <div class="panel-main">
                    <el-form-item label="擅长领域：" prop="cate_id">
                        <el-cascader clearable separator=">"
                                     expand-trigger="hover"
                                     :options="categoys"
                                     :props="props"
                                     v-model="form.cate_id">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item required label="右侧推荐：" prop="recommend">
                        <el-radio-group v-model="form.recommend">
                            <el-radio :label="1" border>否</el-radio>
                            <el-radio :label="2" border>是</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="首页推荐：" prop="index_recomment">
                        <el-select v-model="form.index_recomment" placeholder="请选择所属分类">
                            <el-option key="0" label="取消推荐" value="0"> </el-option>
                            <el-option
                                    v-for="item in cate"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="首页备选：" prop="index_spare">
                        <el-select v-model="form.index_spare" placeholder="请选择所属分类">
                            <el-option key="0" label="取消备选" value="0"> </el-option>
                            <el-option
                                    v-for="item in cate"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item required label="是否热门：" required prop="recommend">
                        <el-radio-group v-model="form.hot">
                            <el-radio :label="1" border>否</el-radio>
                            <el-radio :label="2" border>是</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item required label="是否优质：" required prop="recommend">
                        <el-radio-group v-model="form.quality">
                            <el-radio :label="1" border>否</el-radio>
                            <el-radio :label="2" border>是</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item required label="状态：" required prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="1" border>正常</el-radio>
                            <el-radio :label="2" border>待审核</el-radio>
                            <el-radio :label="3" border>未通过</el-radio>
                            <el-radio :label="4" border>关闭</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="form.status != 1" label="原因：" prop="reason" :rules="[{ required: true, message: '请填写状态原因', trigger: 'blur'}]">
                        <el-input type="textarea" clearable v-model="form.reason"></el-input>
                    </el-form-item>
                </div>
                <el-form-item style="padding-left: 150px;margin-top: 50px">
                    <el-button type="primary" @click="update()">保 存</el-button>
                    <el-button @click="back()" style="margin-left: 50px">返 回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('neditor/neditor.config.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.all.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.service.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/i18n/zh-cn/zh-cn.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/browser-md5-file.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/jquery-1.10.2.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    {{--级联多选--}}
    <script src="{{ asset('//unpkg.com/element-ui@2.9.2/lib/index.js') }}" type="text/javascript"></script>
    <script>
        $(function () {
            let app = new Vue({
                el: '#app',
                data: function () {
                    return {
                        info: {!! $info !!},
                        cate: {!! $cate !!},
                        categoys: {!! $categorys !!},
                        props: { multiple: true },
                        form: {
                            id: " {{ $id }}",
                            cate_id: '',
                            hot: 1,
                            recommend: 1,
                            index_recomment: 0,
                            index_spare: 0,
                            quality: 1,
                            status: 2,
                        },
                    }
                },
                created() {
                    let that = this;
                    if (this.form.id > 0) {
                        this.form = {
                            id: this.info.id,
                            cate_id: this.info.cate_id,
                            hot: this.info.hot,
                            recommend: this.info.recommend,
                            index_recomment: this.info.index_recomment,
                            index_spare: this.info.index_spare,
                            quality: this.info.quality,
                            status: this.info.status,
                            reason: this.info.reason,
                        };
                    }
                },
                methods: {
                    //返回
                    back() {
                        window.history.go(-1);
                    },
                    //更新
                    update() {
                        this.form._token = "{{csrf_token()}}";
                        this.$refs['form'].validate((valid) => {
                            if (valid) {
                                let that = this;
                                $.post("{{ route('admin.store.update') }}", this.form, function (res) {
                                    if (res.code) {
                                        that.$message.error(res.msg);
                                    } else {
                                        that.$message({
                                            type: 'success',
                                            duration: '1000',
                                            message: res.msg,
                                            onClose: () => {
                                                window.history.go(-1);
                                            }
                                        });
                                    }
                                }, 'JSON');
                            }
                        });
                    },
                }
            });
        })
    </script>
@endsection
